<template>
    <el-dialog
        v-model="videoDialogVisible"
        title="视频监控"
        width="30%"
        :before-close="handleClose"
    >
        <div>
            <video
                controls
                width="100%"
                height="auto"
                :src="dataSrc"
                type="video/mp4"
                autoplay
                muted
                playsinline
                >
                您的浏览器不支持 video 标签。
            </video>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    dialogVisible:{
        type: Boolean,
        default: false
    },
    dataSrc:{
        type: String,
        required: true
    }
})
const emit = defineEmits(['dialogClose', 'update:dialogVisible'])

// 使用computed实现双向绑定
const videoDialogVisible = computed({
    get() {
        return props.dialogVisible
    },
    set(value) {
        // 当对话框可见性改变时，同时更新父组件的dialogVisible值
        emit('update:dialogVisible', value)
        // 如果是关闭对话框，触发dialogClose事件
        if (!value) {
            emit('dialogClose')
        }
    }
})

function handleClose(){
    videoDialogVisible.value = false
}

</script>

<style lang="scss" scoped>
</style>